<template>
  <el-row type="flex" justify="center" align="middle" class="pageWrapper">
    <el-form ref="form" label-width="80px">
      <h3>登录</h3>
      <el-form-item label="账号">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
          v-model="form.password"
          type="password"
          @keyup.enter.native="onSubmit"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">登录</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      msgBox: null,
      isLogin: false,
      form: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    onSubmit() {
      // 防抖处理用户多次点击提交按钮 避免多次发送请求
      if (this.isLogin) {
        return;
      }

      // 点击登录判断输入是否为空
      if (!this.form.username || !this.form.password) {
        // 在每次提示执行的前面情空之前的提示 判断是否有之前的提示的实例
        if (this.msgBox) {
          this.msgBox.close();
        }
        //   为空提示输入正确的内容
        //每次使用this.$message会返回Message实例，使用变量接收这个实例
        this.msgBox = this.$message.warning("请输入正确内容");
        return;
      }
      // 在请求未完成防止用户多次点击
      this.isLogin = true;
      //   发送请求登录
      this.$axios({
        method: "post",
        url: "/login",
        data: this.form,
      })
        .then((res) => {
          // console.log(res, "res");
          // 发送成功后解除登录点击按钮
          this.isLogin = false;
          // console.log(res.data);
          // 登录成功
          if (res.data.message === "登录成功") {
            // 在每次提示执行的前面情空之前的提示 判断是否有之前的提示的实例
            if (this.msgBox) {
              this.msgBox.close();
            }
            this.msgBox = this.$message.success("登录成功");
            // 将获取的token存储到本地
            localStorage.setItem("token", res.data.data.token);
            // 用户id存储到本地
            localStorage.setItem("myuserid", res.data.data.user.id);

            // 跳转到首页
            this.$router.push("/postlist");
          } else {
            // 在每次提示执行的前面情空之前的提示 判断是否有之前的提示的实例
            if (this.msgBox) {
              this.msgBox.close();
            }
            // 提示登录失败
            this.msgBox = this.$message.error(res.data.message);
          }
        })
        .catch((err) => {
          console.dir(err);
          // 在每次提示执行的前面情空之前的提示 判断是否有之前的提示的实例
          if (this.msgBox) {
            this.msgBox.close();
          }
          // 提示
          this.msgBox = this.$message.error("系统错误");
        });
    },
    reset() {
      //   重置用户输入信息
      this.form = {
        username: "",
        password: "",
      };
    },
  },
};
</script>

<style lang="less" scoped>
.el-form {
  background-color: #fff;
  padding-right: 40px;
}
h3 {
  text-align: center;
  padding: 20px 0;
  margin-left: 40px;
}
.pageWrapper {
  background-color: #e4e4e4;
  min-height: 100vh;
}
</style>
